<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <div class="md:flex">
      <div class="md: w-2/3">
        <FormItem name="slidingWindowType" label="滑动窗口类型" :rules="[{ required: true, message: '请选择滑动窗口类型' }]">
          <Select v-model:value="formState.slidingWindowType">
            <SelectOption v-for="slidingWindow in slidingWindowList" v-bind:key="slidingWindow.value" :value="slidingWindow.value"
              >{{ slidingWindow.label }}
            </SelectOption>
          </Select>
        </FormItem>
      </div>
      <div class="md: w-1/2">
        <FormItem name="slidingWindowSize" label="滑动窗口大小" :rules="[{ required: true, message: '请输入滑动窗口大小' }]">
          <Input v-model:value="formState.slidingWindowSize" />
        </FormItem>
      </div>
      <div class="md:w-5"></div>
      <div class="md: w-1/7">
        <FormItem name="windowSizeUnit" label="" :rules="[{ required: true, message: '请选择单位' }]">
          <Select v-model:value="formState.windowSizeUnit">
            <!--            <SelectOption v-for="unit in unitList" :value="unit.value">{{ unit.label }}</SelectOption>-->
          </Select>
        </FormItem>
      </div>
    </div>
    <div class="md: w-1/2">
      <FormItem name="minimumNumberOfCalls" label="调用次数基线" :rules="[{ required: true, message: '请输入调用次数基线' }]">
        <Input v-model:value="formState.minimumNumberOfCalls" />
      </FormItem>
    </div>
    <div class="md:flex">
      <div class="md: w-1/3">
        <FormItem name="failureRate" label="错误率阈值熔断">
          <Checkbox v-model:checked="failureRate"></Checkbox>
        </FormItem>
      </div>
      <div class="md:w-5"></div>
      <div class="md:w-2/3" v-if="failureRate">
        <FormItem name="failureRateThreshold" label="错误率阈值" :rules="[{ required: true, message: '请输入错误率阈值' }]">
          <Input v-model:value="formState.failureRateThreshold" />
        </FormItem>
      </div>
    </div>
    <div class="md:flex">
      <div class="md: w-1/3 md:mx-6.5">
        <FormItem name="slowCall" label="慢请求熔断">
          <Checkbox v-model:checked="slowCall"></Checkbox>
        </FormItem>
      </div>
      <div class="md: w-5/6" v-if="slowCall">
        <div class="md:flex">
          <div class="md:w-4/5">
            <FormItem name="slowCallDurationThreshold" label="慢请求响应时间" :rules="[{ required: true, message: '请输入慢请求响应时间' }]">
              <Input v-model:value="formState.slowCallDurationThreshold" />
            </FormItem>
          </div>
          <div class="md:w-5"></div>
          <div class="md:w-1/5">
            <FormItem name="slowCallTimeUnit" label="" :rules="[{ required: true, message: '请选择单位' }]">
              <Select v-model:value="formState.slowCallTimeUnit">
                <SelectOption v-for="unit in unitList" v-bind:key="unit.value" :value="unit.value">{{ unit.label }}</SelectOption>
              </Select>
            </FormItem>
          </div>
        </div>
        <FormItem name="slowCallRateThreshold" label="慢请求调用阈值" :rules="[{ required: true, message: '请输入慢请求阈值' }]">
          <Input v-model:value="formState.slowCallRateThreshold" />
        </FormItem>
      </div>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, Select, Input, SelectOption, Checkbox } from 'ant-design-vue';
import { reactive, ref, toRaw, watch } from 'vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';

interface FormState {
  slidingWindowType: string;
  slidingWindowSize: string;
  windowSizeUnit: string;
  minimumNumberOfCalls: string;
  failureRateThreshold: string;
  slowCallDurationThreshold: string;
  slowCallTimeUnit: string;
  slowCallRateThreshold: string;
}

let formState = reactive<Record<string, any>>({});
const formRef = ref();
const emit = defineEmits(['submit', 'change', 'success', 'error']);
const failureRate = ref(false);
const slowCall = ref(false);
const isEdit = ref(false);
const unitList = ref([
  {
    label: 'ms',
    value: 'Ms',
  },
  {
    label: 's',
    value: 'S',
  },
]);

const slidingWindowList = [
  {
    label: '时间',
    value: 'time',
  },
  {
    label: '次数',
    value: 'count',
  },
];

watch(
  () => formState.slidingWindowType,
  () => {
    if (formState.slidingWindowType === 'time') {
      formState.windowSizeUnit = 'S';
    } else {
      formState.windowSizeUnit = '次';
    }

    formState.slidingWindowSize = undefined;
  }
);

function setData(fieldValue: any) {
  if (Object.prototype.hasOwnProperty.call(fieldValue, 'failureRateThreshold')) {
    failureRate.value = true;
    formState.failureRateThreshold = fieldValue.failureRateThreshold;
  }
  if (Object.prototype.hasOwnProperty.call(fieldValue, 'slowCallDurationThreshold')) {
    slowCall.value = true;
    formState.slowCallDurationThreshold = fieldValue.slowCallDurationThreshold;
    formState.slowCallTimeUnit = fieldValue.slowCallTimeUnit;
    formState.slowCallRateThreshold = fieldValue.slowCallRateThreshold;
  }
  formState.slidingWindowType = fieldValue.slidingWindowType;
  formState.slidingWindowSize = fieldValue.slidingWindowSize;
  formState.windowSizeUnit = fieldValue.windowSizeUnit;
  formState.minimumNumberOfCalls = fieldValue.minimumNumberOfCalls;
  isEdit.value = true;
}

function submitHandler() {
  formRef.value
    .validate()
    .then(() => {
      let params = toRaw(formState);
      emit('submit', params);
      emit('success');
      isEdit.value = false;
      formState = undefined;
    })
    .catch((error: ValidateErrorEntity<FormState>) => {
      emit('error', error);
    });
}
defineExpose({ submitHandler, setData });
</script>
